<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的使用实例</title>
    <script>
        function createXmlHttpRequest(xmlrequest) {
            if (window.XMLHttpRequest) {
                xmlrequest = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    xmlrequest = new ActiveXObject("Msxml4.XMLHTTP");
                } catch (e) {
                    try {
                        xmlrequest = new ActiveXObject("Msxml3.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            try {
                                xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
                            } catch (e) {
                            }
                        }
                    }
                }
            }

            return xmlrequest;
        }

        var getXmlRequest = createXmlHttpRequest(getXmlRequest);

        function getAchievement() {
            var value = document.getElementById("name").value;
            var uri = "/api/html/getAjaxData";
            getXmlRequest.open("POST", uri, true);
            getXmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            getXmlRequest.onreadystatechange = showResponse;
            getXmlRequest.send("name=" + value);
        }

        function showResponse() {
            if (getXmlRequest.readyState == 4) {
                if (getXmlRequest.status == 200) {
                    var str = getXmlRequest.responseText;
                    var strs = str.split(",");
                    document.getElementById("maths").value = strs[0];
                    document.getElementById("physics").value = strs[1];
                }
            }
        }
    </script>
</head>
<body>
<form name="form1">
    <h3>输入课程成绩</h3>
    姓名:<input id="name" type="text"/><br/>
    高等数学:<input id="maths" type="text" size="15"/><br/>
    大学物理:<input id="physics" type="text" size="15"/><br/>
    <input type="button" value="成绩提交" onclick="getAchievement()"/>
    <input type="reset" value="成绩重置"/>
</form>
</body>
</html>
